<template>
  <div class="app-page">
    <!-- 头 -->
    <div class="app-header">
      <div class="app-title">
        <i :class="$route.meta.icon"></i> {{ $route.meta.title }}
      </div>
    </div>
    <div class="app-page-padding">
      <div class="app-section">
        <ul class="rs-border-image">
          <li class="first"></li>
          <li class="second mt-20"></li>
        </ul>
      </div>
      <div class="app-section">
        <!-- bidirectional data binding（双向数据绑定） -->
        <codemirror v-model="code" :options="cmOptions"></codemirror>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'StyleButton',
  data () {
    return {
      code: `
// 边框图片
.rs-border-image {
  li {
    height: 100px;
    /*
    border-image-source： 定义元素边框背景图像，可以是图片路径或使用渐变创建的“背景图像”。
    border-image-slice： 定义元素边框背景图像从什么位置开始分割。
    border-image-width： 定义元素边框背景图像厚度。
    border-image-outset： 定义元素边框背景图像的外延尺寸。
    border-image-repeat： 定义元素边框背景图像的平铺方式。
  */
  }
  .first {
    border: 10px solid;
    border-image: linear-gradient(red, yellow) 10;
  }
  .second {
    border: 27px solid;
    border-image-source: url("~@/assets/border.png");
    border-image-slice: 27;
    border-image-repeat: space;
  }
}
      `,
      cmOptions: {
        // codemirror options
        tabSize: 4,
        mode: 'sass',
        theme: 'darcula',
        lineNumbers: true,
        line: true
        // more codemirror options, 更多 codemirror 的高级配置...
      }
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
// 边框图片
.rs-border-image {
  li {
    height: 100px;
    /*
    border-image-source： 定义元素边框背景图像，可以是图片路径或使用渐变创建的“背景图像”。
    border-image-slice： 定义元素边框背景图像从什么位置开始分割。
    border-image-width： 定义元素边框背景图像厚度。
    border-image-outset： 定义元素边框背景图像的外延尺寸。
    border-image-repeat： 定义元素边框背景图像的平铺方式。
  */
  }
  .first {
    border: 10px solid;
    border-image: linear-gradient(red, yellow) 10;
  }
  .second {
    border: 27px solid;
    border-image-source: url("~@/assets/border.png");
    border-image-slice: 27;
    border-image-repeat: space;
  }
}
</style>
